<!-- 用户管理 -->
<template>
  <div class="user">
    <div class="search-container">
      <div class="search-input">
        <el-input v-model="search" placeholder="用户名"></el-input>
        <el-button type="primary" @click="searchFn">筛选</el-button>
      </div>

      <div class="search-input">
        <el-button type="primary">批量删除</el-button>
        <el-button type="primary">添加</el-button>
      </div>
    </div>
    <template>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID" width="50">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="姓名" width="100">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="年龄" width="80">
          <template slot-scope="scope">{{ scope.row.age }}</template>
        </el-table-column>
        <el-table-column label="专业" width="120">
          <template slot-scope="scope">{{ scope.row.major }}</template>
        </el-table-column>
        <el-table-column label="地址" width="200">
          <template slot-scope="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column label="缴费" width="80">
          <template slot-scope="scope">{{ scope.row.pay }}</template>
        </el-table-column>
        <el-table-column label="毕业时间" width="100">
          <template slot-scope="scope">{{ scope.row.graduateTime }}</template>
        </el-table-column>
        <el-table-column width="200">
          <template slot-scope="scope">
            <el-button type="success" @click="editFn(scope.row)"
              >编辑</el-button
            >
            <el-button type="warning" @click="delFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 定义模态框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div class="content">
        <el-input v-model="editInfo.name" placeholder="姓名"></el-input>
        <el-input v-model="editInfo.age" placeholder="年龄"></el-input>
        <el-input v-model="editInfo.major" placeholder="专业"></el-input>
        <el-input v-model="editInfo.address" placeholder="地址"></el-input>
        <el-select v-model="editInfo.pay" placeholder="是否缴费">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
        <el-date-picker
          v-model="editInfo.graduateTime"
          type="date"
          placeholder="毕业时间"
        >
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :pager-count="5"
      @current-change="currentchange"
      @prev-click="prev"
      @next-click="next"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getStudentList, editUser, deleteUser } from "@/http/http";
export default {
  data() {
    return {
      tableData: [], // 表格数组
      page: 1, // 页数 第几页
      pageSize: 10, // 每页条数
      search: "", // 搜索值
      dialogVisible: false, // 是否显示模态框
      editInfo: {}, // 编辑用户信息
      total: 0, // 总数据条数
    };
  },
  methods: {
    searchFn() {
      // 根据搜索条件进行筛选
      this.getlist();
    },
    getlist() {
      // 获取学生列表数据
      getStudentList({
        searchVal: this.search,
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        // console.log(11, res);
        this.tableData = res.data;
        this.total = res.total;
      });
    },
    editFn(item) {
      // console.log(item);
      //编辑按钮
      this.dialogVisible = true;
      // 数据回填
      this.editInfo = item;
    },
    editSure() {
      // 编辑确认按钮
      // console.log(this.editInfo);
      // 将获取的日期格式转换成yyyy-mm-dd
      let graduateTime = new Date(this.editInfo.graduateTime);
      let month =
        graduateTime.getMonth() + 1 < 10
          ? "0" + (graduateTime.getMonth() + 1)
          : graduateTime.getMonth() + 1;
      let year = graduateTime.getFullYear();
      let day =
        graduateTime.getDate() < 10
          ? "0" + graduateTime.getDate()
          : graduateTime.getDate();
      let selectDay = year + "-" + month + "-" + day;
      // console.log(selectDay);
      this.editInfo.graduateTime = selectDay;
      //调用编辑用户接口
      editUser(this.editInfo).then((res) => {
        if (res.code == 200) {
          // 隐藏模态框
          this.dialogVisible = false;
          // 修改成功提示
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 2000,
          });
          // 重新调用列表接口
          this.getlist();
        }
      });
    },
    delFn(item) {
      // 删除按钮
      console.log(item);
      deleteUser({ id: item.id }).then((res) => {
        if (res.code == 200) {
          // 重新调用学生列表
          // 修改成功提示
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 2000,
          });
          this.getlist();
        }
      });
    },
    currentchange(val) {
      // 点击页码时触发
      // console.log(val);
      this.page = val;
      // 重新调用学生列表
      this.getlist();
    },
    prev(val) {
      // 点击上一页触发
      // console.log(val);
      this.page = val;
      // 重新调用学生列表
      this.getlist();
    },
    next(val) {
      // 点击下一页触发
      // console.log(val);
      this.page = val;
      // 重新调用学生列表
      this.getlist();
    },
  },
  created() {
    // 初始化调用
    this.getlist();
  },
};
</script>
<style scoped lang='less'>
.user {
  overflow: auto;
}
/* @import url(); 引入css类 */
.search-container {
  height: 66px;
  margin: 0 0 20px;
  padding: 0px 18px 0px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  .search-input {
    display: flex;
    align-items: center;
  }
  /deep/.el-input__inner {
    width: 163px;
    height: 30px;
    margin-right: 15px;
  }
}
.content .el-input {
  margin: 5px 0;
}
</style>